<template>
  <div class="cabin_container">
    <div class="top">
      <span class="disc_font">MASTER</span>
      <div style="margin-left: 10px" class="box_1">24&nbsp;C</div>
    </div>
    <div class="middle_1">
      <span class="middle_1_font" style="margin-left: 103px">F/D</span>
      <span class="middle_1_font" style="margin-left: 88px">A</span>
      <span class="middle_1_font" style="margin-left: 60px">B</span>
      <span class="middle_1_font" style="margin-left: 60px">C</span>
      <span class="middle_1_font" style="margin-left: 60px">D</span>
      <span class="middle_1_font" style="margin-left: 60px">E</span>
      <span class="middle_1_font" style="margin-left: 60px">F</span>
    </div>
    <div class="middle_2">
      <div class="box_2" style="margin-left: 80px">
        {{ fdTemp }}
        <span class="box_font">{{ fdTargetTemp }}</span>
      </div>
      <div class="box_3" style="margin-left: 40px">
        {{ aAreaTemp }}
        <span class="box_font">{{ aAreaTargetTemp }}</span>
      </div>
      <div class="box_3">
        {{ bAreaTemp }}
        <span class="box_font">{{ bAreaTargetTemp }}</span>
      </div>
      <div class="box_3">
        {{ cAreaTemp }}
        <span class="box_font">{{ cAreaTargetTemp }}</span>
      </div>
      <div class="box_3">
        {{ dAreaTemp }}
        <span class="box_font">{{ dAreaTargetTemp }}</span>
      </div>
      <div class="box_3">
        {{ eAreaTemp }}
        <span class="box_font">{{ eAreaTargetTemp }}</span>
      </div>
      <div class="box_3">
        {{ fAreaTemp }}
        <span class="box_font">{{ fAreaTargetTemp }}</span>
      </div>
    </div>
    <div class="buttom_0">
      <span style="margin-left: 4px; display: block; margin-top: 5px" class="disc_font">AFT</span>
      <span style="margin-left: 36px; display: block; margin-top: 5px" class="disc_font">BULK</span>
    </div>
    <div class="buttom_1">
      <div style="padding-left: 15px" class="box_2">
        {{ aftTemp }}
        <span class="box_font">{{ aftTargetTemp }}</span>
      </div>
      <div style="padding-left: 15px" class="box_4">
        {{ bulkTemp }}
        <span class="box_font">{{ bulkTargetTemp }}</span>
      </div>
    </div>
    <div class="buttom_2">
      <canvas id="canvas" width="100" height="70" ref="canvasRef"></canvas>
      <span class="disc_font" style="display: block; margin-top: -20px; margin-left: 72px">C</span>
      <span class="disc_font" style="display: block; margin-top: -5px; margin-left: 85px"
        >F/D&nbsp;TRIM</span
      >
      <span class="disc_font" style="display: block; margin-top: -45px; margin-left: 160px">W</span>
    </div>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'
const store = useStore()
import { Canvas, Line, Triangle, Circle, Path } from 'fabric' // browser

import { computed, ref, onMounted, watch } from 'vue'

const canvasRef = ref(null)
const fdTemp = computed(() => store.getters['air/getFDTemp'])
const aAreaTemp = computed(() => store.getters['air/getAAreaTemp'])
const bAreaTemp = computed(() => store.getters['air/getBAreaTemp'])
const cAreaTemp = computed(() => store.getters['air/getCAreaTemp'])
const dAreaTemp = computed(() => store.getters['air/getDAreaTemp'])
const eAreaTemp = computed(() => store.getters['air/getEAreaTemp'])
const fAreaTemp = computed(() => store.getters['air/getFAreaTemp'])
const aftTemp = computed(() => store.getters['air/getAftTemp'])
const bulkTemp = computed(() => store.getters['air/getBulkTemp'])
const fdTrimValve = computed(() => store.getters['air/getFDTrimValve'])

const fdTargetTemp = ref(24)
const aAreaTargetTemp = ref(24)
const bAreaTargetTemp = ref(24)
const cAreaTargetTemp = ref(24)
const dAreaTargetTemp = ref(24)
const eAreaTargetTemp = ref(24)
const fAreaTargetTemp = ref(24)
const aftTargetTemp = ref(25)
const bulkTargetTemp = ref(25)

watch(
  () => store.getters['air/getFDTrimValve'],
  () => {
    console.log('fdTrimValve', fdTrimValve.value)
    drawCanvas()
  }
)

const drawCanvas = () => {
  const canvasRefrence = canvasRef.value
  if (canvasRefrence.getContext) {
    const ctx = canvasRefrence.getContext('2d')
    //清除旧的图画
    ctx.clearRect(0, 0, canvasRefrence.width, canvasRefrence.height)

    const canvas = new fabric.Canvas('canvas')
    //添加一个圆
    const circle = new fabric.Circle({
      left: 10,
      top: 20,
      radius: 30,
      startAngle: Math.PI,
      endAngle: Math.PI * 2,
      fill: 'black',
      stroke: 'white',
      strokeWidth: 3
    })

    const line1 = new fabric.Line([10, 50, 25, 50], {
      stroke: 'white',
      strokeWidth: 3
    })

    const line2 = new fabric.Line([58, 50, 72, 50], {
      stroke: 'white',
      strokeWidth: 3
    })

    const line3 = new fabric.Line([40, 20, 40, 34], {
      stroke: 'white',
      strokeWidth: 3
    })

    const line4 = new fabric.Line([10, 50, 10, 60], {
      stroke: 'white',
      strokeWidth: 3
    })

    const line5 = new fabric.Line([70, 50, 70, 60], {
      stroke: 'white',
      strokeWidth: 3
    })

    const line6 = new fabric.Line([10, 60, 73, 60], {
      stroke: 'white',
      strokeWidth: 3
    })

    const fdTrimAngle = (fdTrimValve.value / 100) * Math.PI
    const endPointX = 40 + 30 * Math.cos(fdTrimAngle)
    const endPointY = 50 - 30 * Math.sin(fdTrimAngle)

    const line7 = new fabric.Line([40, 50, endPointX, endPointY], {
      stroke: 'white',
      strokeWidth: 3
    })
    canvas.add(circle)
    canvas.add(line1)
    canvas.add(line2)
    canvas.add(line3)
    canvas.add(line4)
    canvas.add(line5)
    canvas.add(line6)
    canvas.add(line7)
  }
}

onMounted(() => {
  drawCanvas()
})
</script>

<style scoped>
.cabin_container {
  width: 634px;
  height: 160px;
}
.top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin-top: 30px;
}
.disc_font {
  color: rgb(8, 214, 255);
  font-weight: 600;
}
.box_1 {
  border: 2px solid rgb(8, 214, 255);
  border-radius: 5px;
  width: 60px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(227, 112, 248);
  font-weight: 600;
  background-color: black;
}

.box_2 {
  border: 2px solid rgb(8, 214, 255);
  width: 70px;
  height: 30px;
  color: rgb(227, 112, 248);
  background-color: black;
  font-weight: 600;
  position: relative;
  padding-left: 5px; /* 设置盒内文字的左距离 */
}

.box_2::before {
  content: '';
  color: rgb(8, 214, 255);
  position: absolute;
  top: -38%;
  transform: translateY(-50%);
  width: 30px;
  height: 20px;
  left: 30%;
  background-color: rgb(63, 63, 63);
  font-weight: 600;
  display: flex;
  justify-content: center;
  z-index: 2;
}

.box_3 {
  border: 2px solid rgb(8, 214, 255);
  width: 70px;
  height: 30px;
  color: rgb(227, 112, 248);
  background-color: black;
  font-weight: 600;
  position: relative;
  padding-left: 5px; /* 设置盒内文字的左距离 */
}
.box_font {
  margin-left: 10px;
  color: white;
  font-size: 18px;
}

.box_3::after {
  content: '';
  position: absolute;
  top: -30%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  left: 34%;
  background-color: rgb(63, 63, 63);
  font-weight: 600;
  display: flex;
  justify-content: center;
}

.box_4 {
  border: 2px solid rgb(8, 214, 255);
  width: 70px;
  height: 30px;
  color: rgb(227, 112, 248);
  background-color: black;
  font-weight: 600;
}

.box_4::after {
  content: '';
  color: rgb(8, 214, 255);
  position: absolute;
  top: -28%;
  transform: translateY(-50%);
  width: 40px;
  height: 20px;
  left: 62%;
  background-color: rgb(63, 63, 63);
  font-weight: 600;
  display: flex;
  justify-content: center;
  z-index: 4;
}

.middle_1 {
  margin-top: -10px;
  width: 100%;
  display: flex;
}

.middle_1_font {
  display: block;
  color: rgb(8, 214, 255);
  font-weight: 600;
  z-index: 3;
  margin-top: 10px;
}

.middle_2 {
  display: flex;
  margin-top: -10px;
}

#canvas {
  margin-left: 80px;
  margin-top: 10px;
  position: absolute;
  z-index: 2;
}

.buttom_0 {
  margin-left: 400px;
  display: flex;
  width: 100px;
  height: 20px;
  position: absolute;
  z-index: 4;
}

.buttom_1 {
  position: absolute;
  z-index: 3;
  margin-left: 380px;
  margin-top: 20px;
  display: flex;
}

.buttom_2 {
  position: relative;
  z-index: 3;
  margin-left: -20px;
}
</style>
